<template>
  <el-dialog
    title="删除提示"
    :visible.sync="visible"
    width="30%"
    top="20vh"
    destroy-on-close
    :before-close="closeDeptDeleteDialogHandle"
    :close-on-click-modal="false"
    class="m-display-delete-confirm"
  >
    <el-row :gutter="20">
      <el-col :span="3">
        <i class="delete-icon el-icon-warning"></i>
      </el-col>
      <el-col :span="21">
        <template v-if="deleteMode !== ''">
          <p class="lh20">
            <span :style="{ color: themeColor}">{{dept.deptName}}</span>
            部门及其子部门存在关联的{{ deleteMode }}
          </p>
          <p v-if="deptCheckData.userNum !== 0" class="lh20">
            1、部门关联的用户数为：
            <el-tooltip effect="light" content="点击关联部门关联的用户" placement="right">
              <span @click="openDeptUserManageDialogHandle" :style="{ color: themeColor, cursor: 'pointer'}">
                {{ deptCheckData.userNum}}
              </span>
            </el-tooltip>
          </p>
          <p class="lh20">
            您确定要执行删除
            <span :style="{ color: themeColor}">{{dept.deptName}}</span>
            部门及其子部门数据吗？
          </p>
          <p class="lh20 hint">
            删除操作不可逆，请谨慎选择。
          </p>
        </template>
        <template v-else>
          <p class="lh20">
            您确定要执行删除
            <span :style="{ color: themeColor}">{{dept.deptName}}</span>
            部门及其子部门数据吗？
          </p>
          <p class="lh20 hint">
            删除操作不可逆，请谨慎选择。
          </p>
        </template>
      </el-col>
    </el-row>

    <!-- 部门关联用户管理弹出框 -->
    <dept-user-manage :dialog-visible="deptUserDialog" ref="deptUserManageDialog"
                      @close-dept-user-dialog="closeDeptUserManageDialogHandle" />

    <span slot="footer" class="dialog-footer">
      <el-button :disabled="buttonLoad" @click="closeDeptDeleteDialogHandle(false)">取 消</el-button>
      <el-button :disabled="buttonLoad" type="danger" @click="deleteDeptHandle">删 除</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import deptUserManage from "@/components/dept/dept-user/manage.vue";

  export default {
    name: "dept-delete-confirm",
    components: { deptUserManage },
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 部门数据对象
        dept: {
          // 部门主键
          deptId: undefined,
          // 部门名称
          deptName: undefined,
        },
        // 部门校验结果对象
        deptCheckData: {
          // 部门及其子部门关联的用户数
          userNum: undefined,
        },
        // 删除模式[空字符串-直接删除 非空字符串-确认删除]
        deleteMode: undefined,
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
        // 部门关联用户管理弹出框是否显示[true-显示 false-关闭]
        deptUserDialog: false,

      }
    },
    computed: {
      // 主题颜色
      themeColor() {
        return this.$store.state.settings.theme
      },
    },
    methods: {
      /**
       * 初始化部门删除提示弹出框方法
       * @param {Object} dept          部门数据对象
       * @param {Object} deptCheckData 部门校验结果对象
       */
      initDeptDeleteConfirmDialog(dept, deptCheckData) {
        this.visible = true;
        let deptObj = this.dept
        let deptCheckDataObj = this.deptCheckData

        deptObj.deptId = dept.deptId
        deptObj.deptName = dept.deptName

        deptCheckDataObj.userNum = deptCheckData.userNum

        this.initDeleteMode()
      },
      /**
       * 初始化删除模式方法
       */
      initDeleteMode() {
        let deleteMode = '', deptCheckData = this.deptCheckData
        if (deptCheckData.userNum !== 0) {
          deleteMode = '用户'
        }
        this.deleteMode = deleteMode
      },
      /**
       * 删除部门事件
       */
      deleteDeptHandle() {
        // 按钮不可被点击
        this.buttonLoad = true
        this.$axios.$delete('/sys/dept/delete', { params: { deptId: this.dept.deptId }})
          .then(() => {
            this.notify('success', '操作成功', `成功删除${this.dept.deptName}部门及其子部门数据`)
            // 关闭弹出框
            this.closeDeptDeleteDialogHandle(true)
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 部门删除提示弹出框关闭处理事件
       * @param {boolean|function} bool 是否刷新父级组件[true-刷新 false-不刷新]
       */
      closeDeptDeleteDialogHandle(bool) {

        // 此处判断触发事件是否是弹出框自带关闭事件
        if (typeof bool === 'function') {
          bool = false
        }
        if (!bool) {
          this.notify('success', '温馨提示', '已取消部门删除操作')
        }
        // 向上传递事件
        this.$emit('close-dept-delete-dialog', bool)

        this.$nextTick(() => {
          this.visible = false
        })
      },
      /**
       * 打开部门与用户管理弹出框事件
       */
      openDeptUserManageDialogHandle() {
        if (this.buttonLoad) {
          return
        }
        this.deptUserDialog = true

        this.$nextTick(() => {
          this.$refs.deptUserManageDialog.initDeptUserManageDialog(this.dept)
        })
      },
      /**
       * 关闭部门与用户管理弹出框事件
       * @param {number} num 最新部门关联用户数
       */
      closeDeptUserManageDialogHandle(num) {
        this.deptUserDialog = false;
        // 赋值最新部门关联用户数
        this.deptCheckData.userNum = num
        // 重新初始化删除模式
        this.initDeleteMode()
      }

    }
  }
</script>

<style scoped>
  /deep/ .el-dialog__body {
    padding: 10px 15px;
  }
  /deep/ .el-dialog__header {
    padding: 15px;
  }
  /deep/ .el-dialog__footer {
    padding: 5px 15px 10px 15px;
  }
  .delete-icon {
    width: 100%;
    font-size: 40px;
    color: #ffba00;
    text-align: center;
  }
  .lh20 {
    line-height: 20px;
  }
  .hint {
    font-size: 12px;
    color: #909399;
  }
</style>
